<template>
  <div class="zf">
    <div @click="shou" class="shou">
      <div class="ii"><van-icon name="wap-home-o" /><span>首页</span></div>
    </div>
    <div class="header">
      <div class="s">
        <van-icon @click="bock" name="arrow-left" />
        <span>租房成交战绩</span>
        <span></span>
      </div>
    </div>
    <div class="main">
      <div class="z-sou">
        <span class="city">北京</span>
        <div class="sou">
          <input v-model="input" placeholder="请在这里输入区域/商圈" type="text" />
          <van-icon @click="sou" name="search" />
        </div>
        <router-link to="/zhan">卖房成交战绩</router-link>
      </div>
      <div class="lis">
        <div class="ii">
          <div class="lie" v-for="(item, ind) in state.list" :key="ind">
            <img :src="item.img" alt="" />
            <div class="you">
              <div class="tit">{{ item.shuoming }}</div>
              <div class="mian">
                {{ item.pingmi }}平/{{ item.tingshi }} / {{ item.xiaoqu }}
              </div>
              <div class="jia">
                <span class="qian">{{ item.jiage }}</span
                ><span class="df">{{ item.m2 }}元/m²</span>
              </div>
              <div class="biao">
                <span>小区</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import axios from "../axios/index";
import { useRouter } from "vue-router";
import { reactive, onMounted ,ref } from "vue";
export default {
  name: "Mf",
  setup() {
    //路由
    const router = useRouter();
    const state = reactive({
      list: [],
    });
    const input=ref()

     const sou=()=>{
      console.log(input.value)
      axios.get(`/mfzhanji/?quyu=${input.value}`).then(res=>{
        // console.log(res)
        state.list=res.result
      })
    }
    const bock = () => {
      router.push("/index");
    };
    const shou = () => {
      router.push("/index");
    };
    onMounted(async () => {
      const data = await axios.get("/mfzhanji");
      state.list = data.result;
    });
    // axios.get(`/mfzhanji`).then(res=>{
    //     // console.log(res)
    //     state.list=res.result
    // })
    return {
      shou,
      bock,
      state,
      input,
      sou
    };
  },
};
</script>
<style scoped>
.ii {
  padding: 0 10px;
}
.shou {
  position: fixed;
  top: 70%;
  left: 80%;
  width: 70px;
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid #000;
  font-size: 14px;
  border-radius: 30px;
  background: #fff;
}
.shou i {
  font-size: 16px;
}
.lis {
  width: 100%;
  height: auto;
}
.lie {
  width: 100%;
  height: 100px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lie img {
  width: 25%;
  height: 90px;
  margin-right: 10px;
}
.tit {
  font-size: 17px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mian {
  font-size: 14px;
}
.you {
  width: 72%;
}
.df {
  font-size: 12px;
}
.zf {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jia {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qian {
  font-size: 19px;
  color: orange;
}
.biao {
  width: 100%;
}
.biao span {
  font-size: 13px;
  padding: 2px 4px;
  margin: 0 2px;
  background: rgba(168, 161, 161, 0.3);
}
.main {
  width: 100%;
  height: auto;
  flex: 1;
  overflow-y: scroll;
}
.header {
  width: 100%;
  height: 50px;
  background: rgb(46, 114, 241);
}
.s {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #fff;
  font-size: 18px;
}
.z-sou {
  width: 100%;
  height: 60px;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.city {
  width: 20%;
  text-align: center;
  line-height: 50px;
}
.sou {
  width: 55%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f2f2f9;
}
.sou input {
  width: 90%;
  border: 0;
  background: none;
}
.z-sou a {
  width: 20%;
  color: #000;
  font-size: 12px;
}
</style>
